<template>
  <b-page class="cyfs page-list">
    <div class="stat-line">
      <div class="stat-box join-count">
        <div class="title">
          参与活动人数
        </div>
        <div class="stat-number">{{ stat.joinSum }}</div>
        <div class="stat-icon"></div>
      </div>
      <div class="stat-box finish-count">
        <div class="title">完成任务人数</div>
        <div class="stat-number">{{ stat.finishCount }}</div>
        <div class="stat-icon"></div>
        <div class="sub-box"></div>
      </div>
      <div class="stat-box award-count">
        <div class="title">发放奖品人数</div>
        <div class="stat-number">{{ stat.getCount }}</div>
        <div class="stat-icon"></div>
        <div class="sub-box"></div>
      </div>
    </div>
    <div v-if="!editing" class="cyfs-table">
      <div class="filter-container d-jcs-aic">
        <div>
          <a-input
            v-model="filter.nickname"
            clearable
            placeholder="粉丝昵称"
            style="width: 180px;"
            :maxLength="20"
            class=""/>
          <b-button
            class=" ml-10"
            prefixIcon="search"
            :loading="loading"
            btnContent="检索"
            @click="getPage">
          </b-button>
        </div>
        <div>
          <a-button style="width:120px" type="primary" @click="getExcel">导出</a-button>
          <a-popover
            :title="null"
            trigger="click"
            placement="bottom"
            v-model="awardDialog"
            width="400">
            <template slot="content">
              <div
                v-for="(item,index) in awardList"
                :key="index"
                style="line-height:40px; color: #232735;cursor: pointer"
                @click="redeem(item.value)">
                {{ item.label }}
              </div>
            </template>
            <a-button class="ml-10" type="primary">标记</a-button>
          </a-popover>

        </div>
      </div>
      <a-table
        rowKey="joinId"
        :pagination="pagination"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="list"
        @change="handleTableChange"
      >
        <span slot="mpAppId" slot-scope="text, record,index" class="d-aic">
          {{ index+1 }}
        </span>
        <span class="follower" slot="headImgUrl" slot-scope="text, record">
          <img class="follower-avatar" :src="record.headImgUrl" :alt="record.nickname"/>
          <div class="follower-nickname">
            <span>{{ record.nickname }}</span>
          </div>
        </span>
        <span slot="following" slot-scope="text, record">
          <span v-if="record.following" style="color: #37ddac">关注中</span>
          <span v-else style="color: #aba4a4">已取关</span>
        </span>
        <span slot="winStatus" slot-scope="text, record" class="d-aic">
          {{ getWinStatus(record) }}
        </span>
        <span slot="joinId" slot-scope="text, record">
          <a-button type="primary" @click="getTrack(record)">
            追踪
          </a-button>
        </span>
      </a-table>
      <a-modal v-model="visible" title="导出" width="650px">
        <div style="display: flex;align-items: center">
          <div class="ml-2" style="width: 80px">公众号：</div>
          <a-select
            :value="mpId"
            placeholder="公众号"
            @change="mpChange"
            style="width: 230px;">
            <a-select-option
              v-for="item in mpList"
              :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </div>
        <div style="display: flex;align-items: center">
          <div class="ml-2" style="width: 80px">完成情况：</div>
          <a-select
            :value="level"
            placeholder="完成情况"
            class=" mt-10"
            @change="levelChange"
            style="margin-top: 10px;width: 230px;">
            <a-select-option
              v-for="item in levelList"
              :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </div>
        <div style="display: flex;align-items: center">
          <div class="ml-2" style="width: 80px">领取状态：</div>
          <a-select
            :value="state"
            placeholder="领取状态"
            class=" mt-10"
            @change="stateChange"
            style="margin-top: 10px;width: 230px;">
            <a-select-option
              v-for="item in stateList"
              :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </div>

        <div slot="footer" class="dialog-footer d-aic">
          <a-button @click="visible = false">取 消</a-button>
          <a :href="url" class="download-btn d-jcc-aic ml-10">确 定</a>
        </div>
      </a-modal>
      <cyfs-track-dialog ref="cyfsTrackDialog"/>

    </div>

  </b-page>
</template>

<script>
    import cyfsTrackDialog from './cyfs-sub/cyfs-track-dialog'
    import API from '../../../api/mp/gameData'
    import MP_API from '../../../api/mp/mp'
    import moment from 'moment'
    import storage from 'store'
    import { ACCESS_TOKEN } from '../../../store/mutation-types'

    export default {
        name: 'HdglList',
        components: { cyfsTrackDialog },
        data () {
            return {
                filter: { nickname: null, appId: null, onlyBlocked: 0 },
                mpId: '',
                state: '',
                level: '',
                url: '',
                stateList: [{ label: '全部', value: '' }, { label: '已领取', value: 1 }, { label: '未领取', value: 0 }],
                awardList: [],
                mpList: [],
                levelList: [],
                selectedRowKeys: [],
                pagination: {
                    current: 0,
                    total: 0,
                    pageSize: 10 // 每页中显示10条数据
                },
                columns: [
                    {
                        title: '排名',
                        width: '100px',
                        dataIndex: 'mpAppId',
                        scopedSlots: { customRender: 'mpAppId' }
                    },
                    {
                        title: '粉丝',
                        width: '100px',
                        scopedSlots: { customRender: 'headImgUrl' }
                    },
                    {
                        title: '关注中',
                        width: '100px',
                        dataIndex: 'following',
                        scopedSlots: { customRender: 'following' }
                    },
                    {
                        title: '当前人气',
                        width: '100px',
                        dataIndex: 'follower'
                    },
                    {
                        title: '历史最高人气',
                        width: '100px',
                        dataIndex: 'maxFollower'
                    },
                    {
                        title: '参加时间',
                        width: '100px',
                        dataIndex: 'joinTime'
                    },
                    {
                        title: '当前级别',
                        width: '100px',
                        dataIndex: 'level'
                    },
                    {
                        title: '所属公众号',
                        width: '100px',
                        dataIndex: 'mpName'
                    },
                    {
                        title: '当前获奖状态',
                        width: '100px',
                        scopedSlots: { customRender: 'winStatus' }
                    },
                    {
                        title: '操作',
                        width: '100px',
                        scopedSlots: { customRender: 'joinId' }
                    }
                ],
                list: [],
                modifyId: 0,
                awardDialog: false,
                ready: false,
                loading: false,
                editing: false,
                visible: false,
                // 数据统计
                stat: {
                    // 参与人数
                    joinSum: 0,
                    // 完成人数
                    finishCount: 0,
                    finishList: [],
                    // 发放奖品人数
                    getCount: 0,
                    getList: [],
                    awardList: [],
                    url: ''
                }
            }
        },
        computed: {
            query () {
                return this.$route.query
            },
            gameId () {
                return this.query.gameTaskId
            },
            gameName () {
                return this.query.gameName
            },
            gzhUserId () {
                return this.$store.state.user.info.gzhUserId
            }
        },
        watch: {
            mpId () {
                this.getUrl()
            },
            level () {
                this.getUrl()
            },
            state () {
                this.getUrl()
            }
        },
        mounted () {
            this.ready = true
            this.load()
            this.loadStat()
            this.initMpList()
        },
        methods: {
            getTrack (row) {
                this.$refs.cyfsTrackDialog.open(row, this.gameId, this.gzhUserId)
            },
            getExcel () {
                this.visible = true
                this.getUrl()
            },
            getUrl () {
                const token = storage.get(ACCESS_TOKEN)
                this.url = '/b/gameDataController/exportGameList?' + 'gameId=' + this.gameId + '&mpId=' + this.mpId + '&level=' + this.level + '&state=' + this.state + '&access_token=' + token
            },
            redeem (awardId) {
                if (this.selectedRows.length === 0) {
                    this.$message.warning('请选择需要兑奖的粉丝')
                    return
                }
                const joinIdList = []
                this.selectedRows.forEach(item => {
                    joinIdList.push(item.joinId)
                })
                const joinIds = joinIdList.join(',')
                API.redeem(joinIds, awardId, this.gzhUserId).then(res => {
                    this.$message.success('兑奖成功')
                    this.getPage()
                }).catch(err => {
                    this.$message.error(err.response.data.message)
                })
            },
            mpChange (value) {
                this.mpId = value
            },
            levelChange (value) {
                this.level = value
            },
            stateChange (value) {
                this.state = value
            },
            exportGameList () {
                this.visible = false
                API.exportGameList(this.gameId, this.mpId, this.level, this.state, this.gzhUserId).then(res => {
                    this.$message.success('导出成功')
                }).catch(err => {
                    this.$message.error(err.response.data.message)
                })
            },
            initMpList () {
                this.mpList = [{ label: '全部', value: '' }]
                // 初始化自己的公众号账户
                MP_API.listByCurrentMpList()
                    .then(res => {
                        if (res.length === 0) {
                            return
                        }
                        res.forEach(item => {
                            this.mpList.push({ label: item.nickname, value: item.mpId })
                        })
                    })
            },
            initLevelList (list) {
                this.levelList = [{ label: '全部', value: '' }]
                list.forEach(item => {
                    const name = '已完成' + item.level + '阶'
                    const awardName = '已发' + item.level + '阶奖品'
                    this.levelList.push({ label: name, value: item.level })
                    this.awardList.push({ label: awardName, value: item.id })
                })
            },
            getWinStatus (row) {
                if (!row.awardId) {
                    return '未发放'
                } else {
                    return '已发奖'
                }
            },
            /**
             * 加载数据
             */
            load () {
                this.getAward()
                this.getPage()
            },
            getAward () {
                API.listByGameAward(this.gameId, this.gzhUserId).then(res => {
                    this.awardList = res
                    this.initLevelList(res)
                }).catch(err => {
                    this.$message.error(err.response.data.message)
                })
            },
            /**
             * 初始化页面
             */
            getPage () {
                this.loading = true
                API.pageGameJoin({
                    current: this.pagination.current,
                    size: this.pagination.pageSize
                }, { gzhUserId: this.gzhUserId, gameId: this.gameId, ...this.filter })
                    .then(res => {
                        this.loading = false
                        this.list = this.formatList(res.records)
                        this.total = res.total
                        this.current = res.current
                        this.size = res.size
                    }).catch(error => {
                    this.loading = false
                    console.error(error)
                })
            },
            formatList (records) {
                const list = []
                records.forEach((item, index) => {
                    list.push({
                        ...item,
                        rank: index + 1 + (this.current - 1) * this.size
                    })
                })
                return list
            },
            loadStat () {
                API.gameCount(this.gameId, this.gzhUserId).then(res => {
                    this.stat = res
                }).catch(err => {
                    console.error(err)
                })
            },
            /**
             * 替换活动状态TODO
             * @returns {string}
             */
            getState (item) {
                const endTimeStamp = moment(item.endTime).unix() * 1000
                const nowTimestamp = new Date().getTime()
                if (endTimeStamp < nowTimestamp) {
                    return '已结束'
                } else {
                    return '进行中'
                }
            },
            gotoSjgl () {
                this.$router.push('/lbsq/rwb/sjtj')
            },
            gotoCyfs () {
                this.$router.push('/lbsq/rwb/fsgl')
            },
            onSelectChange (selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },
            handleTableChange (pagination) {
                this.pagination.current = pagination.current
                this.pagination.pageSize = pagination.pageSize
            }
        }
    }
</script>

<style lang="less">
    .dialog-footer {
        justify-content: flex-end;
    }

    .download-btn {
        width: 64px;
        height: 32px;
        font-size: 14px;
        border-radius: 4px;
        color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF;
    }

    .cyfs {
        height: 100%;
        overflow: auto;

        .filter-container {
            padding: 10px 16px;
            background: white;
            display: flex;
            justify-content: space-between;
        }

        .stat-line {
            height: 200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .stat-box {
            padding: 30px;
            width: 30%;
            color: white;
            border-radius: 4px;

            .title {
                font-size: 16px;
            }

            .stat-number {
                margin: 16px 0;
                font-size: 44px;
                font-weight: 700;
            }
        }

        .join-count {
            background: #40A9FF;
        }

        .finish-count {
            background: #FF688E;
        }

        .award-count {
            background: #FFC71B;
        }

        .follower {
            min-width: 100px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;

            .follower-avatar {
                margin-right: 4px;
                width: 30px;
                height: 30px;
            }

        }

        .hdgl-list-content-warp {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .hdgl-list-content {
            /*调整内容对齐空白*/
            display: flex;
            width: 100%;
            flex-wrap: wrap;

            .hdgl-list-item {
                position: relative;
                margin: 15px;
                width: 240px;
                height: 300px;
                box-shadow: 2px 2px 0 0 rgba(200, 200, 200, 0.5);
                overflow: hidden;

                .hdgl-list-bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 240px;
                }

                .hdgl-item-bottom {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 240px;
                    height: 110px;
                    padding: 12px;
                    background-color: white;
                    font-size: 14px;
                    color: #101010;
                    z-index: 10;
                }

                .game-content {
                    width: 100%;
                    height: 50px;
                }

                .game-state-time {
                    margin-top: 5px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;
                    color: #b0b2b8;
                }
            }
        }

        .game-buttons {
            display: flex;
            justify-content: space-between;
        }
    }

</style>
